<script type="text/javascript" src="/js/roundabout.js"></script>
<script type="text/javascript" src="/js/roundabout_shapes.js"></script>
<style type="text/css">
    .roundabout-holder {
        padding: 0;
        list-style: none;
        padding: 0;
        margin: 0;
        height: 324px;
    }

    .roundabout-moveable-item {
        cursor: pointer;
    }

    .roundabout-in-focus {
        cursor: auto;
    }

    .roundabout-moveable-item img {
        display: block;
        height: 100%;
        width: 100%;
    }

    .roundabout-moveable-item {
        cursor: pointer;
        width: 394px;
        height: 324px;
    }

    .width_myRoundabout {
        width: 790px;
        margin: 0px auto 0px auto;
        padding-left: 9px;
    }

    div .caption {
        z-index: 600;
        background-color: #333333;
        color: #ffffff;
        /*height: 100px;*/
        width: 100%;
        position: absolute;
        bottom: 0;
    }

    div .caption .content {
        margin: 5px
    }

    div .caption .content h3 {
        margin: 0;
        padding: 0;
        color: #1DCCEF;
    }

    div .roundabout_price {
        text-align: right;
        color: #ff8000;
        font-size: 18px;
        font-weight: bold;
        line-height: 20px;
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        $('#<?php echo $componentRoundabout->getComponentId() ?>').roundabout({
            easing: '<?php echo $componentRoundabout->getEasing() ?>',
            duration: <?php echo $componentRoundabout->getDuration() ?>
        });
        var interval = startAutoPlay();
    });

    function startAutoPlay() {
    <?php echo $componentRoundabout->getIntervalFuncScript() ?>
    }
</script>

<div class="width_myRoundabout" style="">
    <ul id="<?php echo $componentRoundabout->getComponentId() ?>" class="roundabout-holder"
        style="padding: 0px; position: relative; z-index: 100;">

        <?php
        foreach ($componentRoundaboutDetails as $componentRoundaboutDetail) {
        echo "<li class='item1 roundabout-moveable-item roundabout-in-focus'><a target='" . $componentRoundaboutDetail->getLinkTarget() . "'
                                                                          href='" . url_for("/product/item?id=".$componentRoundaboutDetail->getProductId()) . "'><img width='" . $componentRoundaboutDetail->getImageWidth() . "'
                                                                                        height='" . $componentRoundaboutDetail->getImageHeight() . "'
                                                                                        title='" . $componentRoundaboutDetail->getImageTitle() . "'
                                                                                        alt='" . $componentRoundaboutDetail->getImageAlt() . "'
                                                                                        src='" . $componentRoundaboutDetail->getImageSrc() . "'></a>
                                                                                        <div class='caption' style='display: block;height: 50px;opacity: 0.8; width: 100%'>
                                                                                            <table width='100%'>
                                                                                                <tr>
                                                                                                    <td><div class='content' style='float:left; overflow:hidden;'><h3>" . $componentRoundaboutDetail->getImageTitle() . "</h3>" . $componentRoundaboutDetail->getImageAlt() . "</div></td>
                                                                                                    <td valign='middle' align='right'><div class='roundabout_price' style='float:right; padding: 10px;'><strong>" . "RM ".$componentRoundaboutDetail->getPriceTag() . "</strong></div></td>
                                                                                                </tr>
                                                                                            </table>
                                                                                        </div>
                                                                                        </li>";
    }
        ?>
    </ul>
</div>